<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg"> <br>
        {{reverseMsg}} <br>
        {{test}}
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    const app = document.querySelector("#app")
    new Vue({
        el:app,
        data:{
            msg:"什么是快乐星球?",
            test:"test"
        },
        computed:{
            reverseMsg:function () {
                console.log("computed")
                //reverseMsg 也是响应式的  而且它具备依赖;当依赖变化时 当前的计算属性也会重新执行
                //复杂逻辑的编写
                return this.msg.split("").reverse().join("")
            }
        },
        mounted(){
            setTimeout(()=>{
                this.test="头疼"
            },3000)
        }
    })
</script>
</html>